<script setup>
// 请求
import axios from 'axios';
import { ref } from 'vue';
// axios.get("https://www.baidu.com")
// .then( function (response) {
//    alert(response.data);
// });

const file = ref(null);
const imgUrl = ref('');
const handlerFileChange = (e) => {
  file.value = e.target.files[0];
  console.log(file.value);

};
const buttonClick = () => {
  console.log("buttonClick")
  axios.post("https://api.imgbb.com/1/upload", {
    key: "5f66bc7920ee4ef735e5ec97b57f53cd",
    image: file.value  // 需要一个图片文件
  }).then(function (response) {
    console.log(response);
    alert (response.data);
  });
};
</script>

<template>
  <h1>图片上传</h1>
  <input type="file" @change="handlerFileChange" accept="image/*" />
  <button @click="buttonClick">图片上传</button>
  <img :src="imgUrl" alt="" />
</template>


<style scoped></style>